import React, { useEffect, useState, useRef } from "react";
import { Input, Tabs, Collapse, Button } from 'antd';
import { request } from 'dw-mx-request';
import classNames from 'classnames';
import './style/component.css';
import DragComponent from "@/application/components/DragComponent";

export default function ViewComponent(props) {

    const [ctype, setCType] = useState('');     //0：自定义组件   1：大屏组件
    const [picList, setPicList] = useState([]);

    useEffect(() => {
        setCType(props.ctype);
        initComponentPic(props.ctype);
    }, [props.ctype]);

    const initComponentPic = async (ctype) => {
        const res = await request('/mx/bigScreen/initComponentPic', {
            ctype: ctype
        });
        const result = JSON.parse(res);
        const componentList = JSON.parse(result.cpiclist);
        const rowComponent = {component_id: "rowlayout",
            component_name: "横向布局",
            component_option: "123",
            component_type: "rowlayout",
            frameDOTypeList: "component_type:String,component_id:String,component_name:String,iconurl:String,component_option:String",
            iconurl: "http://10.1.60.158:7080/component/custom001.png"
        };
        const colComponent = {
            component_id: "collayout",
            component_name: "纵向布局",
            component_option: "123",
            component_type: "collayout",
            frameDOTypeList: "component_type:String,component_id:String,component_name:String,iconurl:String,component_option:String",
            iconurl: "http://10.1.60.158:7080/component/custom001.png"
        };
        componentList.push(rowComponent);
        componentList.push(colComponent);
        setPicList(componentList);
    };

    return (
        <div>
            {picList.map((item, index)=> {
                    return <DragComponent item={item}/>})}
        </div>
    );
}